<template>
  <div style="height: 90%; width: 100%" class="barChart" id="barChart" v-if="show"></div>
</template>

<script>
export default {
  name: "electricLineEcharts",
  data() {
    return {
      show: true,
      myChart: null,
      option: {
        backgroundColor: '#fff',
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(0,0,0,.3)',
          borderColor: 'rgba(0,0,0,0)',
          textStyle: {
            fontSize: "18px", //字体大小
            color: "#fff", //字体颜色
          },
          fontSize: "18px",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          left: 'right',
          textStyle: {
            fontSize: "18px", //字体大小
            color: "#004246", //字体颜色
          },
        },
        grid: {
          top: "50",
          left: "3%",
          right: "4%",
          bottom: "30",
          containLabel: true,
        },
        xAxis: {
          name: '日',
          type: "category",
          data: [],
          axisLine: {
            lineStyle: {
              color: "#85A3A3",
            },
          },
          axisLabel: {
            color: "#85A3A3",
            fontSize: 16,
          },
          axisTick: {
            show: true,
          },
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: 16,
              color: "#85A3A3",
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#EBE7E5'
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dotted",
              color: "#EBE7E5",
              width: 1,
            },
          },
        },
        series: [
          {
            name: 'A相电流',
            type: 'line',
            itemStyle: {
              color: '#FFCC00FF'
            },
            data: []
          },
          {
            name: 'B相电流',
            type: 'line',
            itemStyle: {
              color: 'green'
            },
            data: []
          },
          {
            name: 'C相电流',
            type: 'line',
            itemStyle: {
              color: 'red'
            },
            data: []
          },
        ],
      },
    }
  },
  props:{
    echartsData: {
      type: Array,
      default(){
        return []
      }
    },
    unit:{
      type: String,
      default() {
        return '年';
      }
    },
    xData: {
      type: Array,
      default(){
        return []
      }
    },
  },
  watch:{
    echartsData: {
      deep: true,
      handler(n){
        if(n.length){
          this.echartsInit();
        }
      }
    },
  },
  methods: {
    //初始化echarts
    echartsInit() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
        setTimeout(() => {
          let dashEcharts = document.getElementById('barChart');
          let myChartTemp = this.$echarts.init(dashEcharts);
          this.option.xAxis.name = this.unit;
          this.option.xAxis.data = this.xData;
          this.option.series[0].data = this.echartsData[0];
          this.option.series[1].data = this.echartsData[1];
          this.option.series[2].data = this.echartsData[2];
          myChartTemp.setOption(this.option);
          this.myChart = myChartTemp
        }, 100)
      })
    },
  }
}
</script>

<style scoped>

</style>
